<template>
	<view class="feedback-container">
		<view class="feedback-title">
			意见反馈
		</view>
		<view class="feedback-content">
			<textarea class="feedback-textarea" v-model="feedbackText" placeholder="请输入您要反馈的问题"></textarea>
		</view>
		<view class="feedback-title">
			反馈图片：
		</view>
		<view class="feedback-image-box">
			<view class="feedback-image-item" v-for="(item,index) in imgArr" :key="index">
				<view class="close-btn">
					<uni-icons type="closeempty" size="18" color="#fff" @click="delImage(index)"></uni-icons>
				</view>
				<view class="image-box">
					<image :src="item" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 添加图片的icon,最多上传五个图片超出五个就不展示 -->
			<view v-if="imgArr.length < 5" class="feedback-image-item" @click="addImage">
				<view class="image-box">
					<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
				</view>
			</view>
		</view>
		<button type="warn" class="feedback-button" @click="submitFeedback">提交反馈意见</button>
	</view>
</template>

<script>
	import {
		feedback
	} from "../../ajax/api/self.js";
	export default {
		data() {
			return {
				feedbackText: "",
				imgArr: [],
			}
		},
		methods: {
			// 添加图片的方法
			async addImage() {
				const count = 5 - this.imgArr.length;
				uni.chooseImage({
					count,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach((url, index) => {
							if (index < count) {
								this.imgArr.push(url);
							}
						})
					}
				})
			},
			// 发送意见反馈的内容
			async submitFeedback() {
				if (!this.feedbackText) {
					uni.showToast({
						title: "文本内容不能为空",
						icon: "none"
					})
					return;
				}
				// 提交反馈信息
				uni.showLoading();
				const res = await feedback({
					feedbackText: this.feedbackText,
					imgArr: this.imgArr
				})
				uni.showToast({
					title: "意见反馈成功"
				})
				// 提交完意见以后回到self界面
				setTimeout(()=>{
					uni.switchTab({
						url:"/pages/self/self"
					})
				},1500)
			},
			// 删除图片
			delImage(index) {
				this.imgArr.splice(index, 1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./css/feedback.scss";
</style>
